<template>
<div>
  <el-row>
    <el-col :span="24">
      <el-form-item
        :label="labelContent"
        label-width="200px"
        prop="firstText"
      >
        <el-input
          v-model="form.paragraphs[number].paragraph"
          type="textarea"
          rows="4"
          style="width: 600px"
        ></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <!-- 课文分段朗读第一段音频 -->
  <el-row>
    <el-col :span="4">
      <el-form-item
        :label="labelMusic"
        label-width="200px"
        prop="content"
      >
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-input type="text" style="margin-left: 55px; width: 200px" />
    </el-col>
    <!--   :action="upLoadAudio"  :file-list="fileList" -->
    <el-col :span="4">
      <el-upload
        action="#"
        id="audioUpload"
        class="avatar-uploader"
        :show-file-list="true"
        :multiple="false"
        :on-remove="handleRemove"
        :limit="1"
        :auto-upload="true"
        :on-change="handleChangeAudio"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <el-button
          slot="trigger"
          size="small"
          type="primary"
          style="margin-left: 25px"
        >选择文件
        </el-button>
      </el-upload>
    </el-col>
  </el-row>
</div>
</template>

<script>
export default {
  name: "paragraph2",
  data:function (){
    return{
      audioDuration:0,//音频默认时长
      content: "",//当前段落的内容
      labelContent:"",//段落提示
      labelMusic:"",//音频提示
      superNumber:["零","一","二","三","四","五","六","七","八","九","十"],//为段落序号阿拉伯数字转中文数字做准备
    }
  },
  props:{
    form:{
      type:Object,
    },
    number:{
      type:Number,
    }
  },
  methods:{
    handleRemove(file) {
      console.log(file);
    },
    handleAvatarSuccess(res, file) {
      console.log("555555555555555555555555", res, file);
    },
    handleChangeAudio() {},
    beforeAvatarUpload(file) {
      // 文件类型进行判断
      const isAudio =
        file.type === "audio/mp3" ||
        file.type === "audio/mpeg" ||
        file.type === "audio/wma" ||
        file.type === "audio/aac";
      // 限制上传文件大小 2M
      const isLt2M = file.size / 1024 / 1024 < 2;
      const isTime60S = this.audioDuration >= 60 ? true : "";
      // 获取时长
      this.getTimes(file);
      if (!isAudio) {
        this.$message.error(
          "上传文件只能是mp3格式或mpeg格式或wma格式或aac格式!"
        );
        this.fileList = [];
      } else {
        if (!isLt2M) {
          this.$message.error("上传文件大小不能超过 2MB!");
          this.fileList = [];
        } else {
          if (!isTime60S) {
            this.$message.error("上传文件时长不能超过60秒!");
            this.fileList = [];
          }
        }
      }
      return isAudio && isLt2M && isTime60S;
    },
    getTimes(file) {
      var content = file;
      //获取录音时长
      var url = URL.createObjectURL(content);
      //经测试，发现audio也可获取视频的时长
      var audioElement = new Audio(url);
      audioElement.addEventListener("loadedmetadata", (_event) => {
        this.audioDuration = parseInt(audioElement.duration);
        // console.log(this.audioDuration);
      });
    },
  },
  created() {
    //要根据number选择段落
    this.content=this.form.paragraphs[this.number].paragraph
    this.labelContent="课文分段朗读第"+this.superNumber[this.number]+"段文本:"
    this.labelMusic="课文分段朗读第"+this.superNumber[this.number]+"段音频:"
  }
}
</script>

<style scoped>

</style>
